// 自定义六宫格验证码输入框
import 'package:flutter/material.dart';
import '../../utils/screenAdapter.dart';

class PinInput extends StatelessWidget {
  final bool isFirst;
  final TextEditingController controller;
  final bool autoFocus;
  const PinInput({
    super.key,
    required this.isFirst,
    required this.controller,
    required this.autoFocus,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenAdapter.width(100),
      height: ScreenAdapter.height(184),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black38),
        borderRadius: BorderRadius.circular(ScreenAdapter.radius(10)),
      ),
      child: TextField(
        controller:
            controller, // 文本框控制器：用来在外部获取输入的值--注意使用同一个controller时会实时更新输入的值，所以不同的文本输入用不同的controller
        maxLength: 1, // 限制文本框输入长度为1
        keyboardType: TextInputType.number,
        autofocus: autoFocus, // 是否自动获取焦点
        cursorColor: Colors.black38,
        textAlign: TextAlign.center, // 输入框文本对齐方式
        decoration: InputDecoration(
          border: InputBorder.none, // 去掉默认的下划线
          counterText: "", // 去掉输入框计数器文本---位于右下方显示的文本，常用于显示输入的字符数量
        ),
        onChanged: (value) {
          print("输入的值是$value");
          if (value.isNotEmpty) {
            // 输入值后往下一个格子跳转
            FocusScope.of(context).nextFocus();
          }
          if (value.isEmpty && isFirst == false) {
            // 删除值后往回跳，第一个不需要跳
            FocusScope.of(context).previousFocus(); 
          }
        },
      ),
    );
  }
}
